<div class="alert-box-demo">

  <section>
    <h4>Info:</h4>
    <hi-alert-box>
      <h4 class="alert-heading">Well done!</h4>
      <p>Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.</p>
      <p class="mb-0">Whenever you need to, be sure to use margin utilities to keep things nice and tidy.</p>
    </hi-alert-box>

    <hi-alert-box>
      <strong>Heads up!</strong> This <a href="javascript:;" class="alert-link">alert needs your attention</a>, but it's not super
      important.
    </hi-alert-box>
  </section>

  <section>
    <h4>Success:</h4>
    <hi-alert-box type="success">
      <strong>Well done!</strong> You successfully read this important alert message.
    </hi-alert-box>
  </section>

  <section>
    <h4>Warning:</h4>
    <hi-alert-box type="warning">
      <strong>Warning!</strong> Better check yourself, you're not looking too good.
    </hi-alert-box>
  </section>

  <section>
    <h4>Danger:</h4>
    <hi-alert-box type="danger">
      <strong>Oh snap!</strong> Change a
      few things up and try submitting again.
    </hi-alert-box>
  </section>

  <section>
    <h4>Auto disappear:</h4>
    <div class="checkbox">
      <label>
        <input type="checkbox" [(ngModel)]="autoDisappear" (change)="autoDisappearChange()"/>Auto disappear after
        2s?
      </label>
    </div>

    <hi-alert-box type="danger" [closable]="true" (close)="close()" *ngIf="!closed">
      <strong>Oh snap!</strong> Change a few things up and try submitting again.
    </hi-alert-box>
  </section>
</div>
